<template>
  <div>
    <Header :config="config"></Header>
    <Navigation :config="config"></Navigation>
    <div class="banner">
      <img src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/831aacdab4dd4ace8810ce2ce4a07374.jpg" alt style="width: 100%;">
    </div>
    <div class="khal-crumb" style="margin-top: 10px;">
      <div class="kc-center">
        <div class="kcc-list">
          <a v-for="(item,index) in crumbs" :key="index" :href="item.href ? item.href : 'javascript:void(0);'" class="kccl-a" :class="item.href ? '' : 'noafter'">{{ item.title }}</a>
        </div>
      </div>
    </div>
    <div class="xwzxxq-box">
      <div class="xb-center">
        <div class="xbc-left">
          <div class="l-title">{{ infoData.newsMap.title }}</div>
          <div class="l-date_type_view">
            <div class="date">发布时间：{{ infoData.newsMap.addTimeNow }}</div>
            <div class="type">资讯类型：{{ infoData.newsMap.newsTypeName }}</div>
            <div class="type">浏览：{{ infoData.newsMap.views }}</div>
          </div>
          <div class="l-content" v-html="infoData.newsMap.content"></div>
          <div class="l-label" v-show="infoData.newsMap.caseTypeAliases">
            <a target="_blank" :href="`${config.domain}/khal/${infoData.newsMap.caseTypeAliases}/`" class="ll-a" :title="infoData.newsMap.caseTypeName">{{ infoData.newsMap.caseTypeName }}</a>
          </div>
          <div class="l-notice">注：部分图片及内容来源于网络，如有侵权，请联系<a href="tel:19102671826">我们</a>删除</div>
          <div class="l-page">
            <a v-if="infoData.previousPageNewsMap" :href="`${config.domain}/xwzxxq/${infoData.previousPageNewsMap.id}.html`" class="lp-list">
              <img :src="infoData.previousPageNewsMap.images" :alt="infoData.previousPageNewsMap.title" class="cover">
              <div class="item">
                <div class="i-tips">上一篇</div>
                <div class="i-title">{{ infoData.previousPageNewsMap.title }}</div>
              </div>
            </a>
            <a v-if="infoData.nextPageNewsMap" :href="`${config.domain}/xwzxxq/${infoData.nextPageNewsMap.id}.html`" class="lp-list fr">
              <img :src="infoData.nextPageNewsMap.images" :alt="infoData.nextPageNewsMap.title" class="cover">
              <div class="item">
                <div class="i-tips">下一篇</div>
                <div class="i-title">{{ infoData.nextPageNewsMap.title }}</div>
              </div>
            </a>
          </div>
        </div>
        <div class="xbc-right">
          <div class="r-type">
            <div class="rt-logo">
              <img src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221115/14605d9a6ed8492380b862706597b5a1.png" alt>
            </div>
            <div class="rt-title">
              <i class="icon"></i>
              <p class="text">新闻类别</p>
            </div>
            <ul class="rt-ul">
              <li class="rtu-li" v-for="item in typeData" :key="item.id">
                <a target="_blank" :href="item.href" :title="item.typeName">
                  <p class="text">{{ item.typeName }}</p>
                  <i class="icon">&gt;</i>
                </a>
              </li>
            </ul>
          </div>
          <div class="r-case" v-if="relevantCaseData.length > 0">
            <ul class="rc-ul">
              <li class="rcu-li" v-for="item in relevantCaseData" :key="item.id">
                <a target="_blank" :href="item.href" class="cover" :title="item.title">
                  <img :src="item.images" :alt="item.title">
                </a>
                <a target="_blank" :href="item.href" class="title" :title="item.title">{{ item.title }}</a>
              </li>
            </ul>
            <a target="_blank" :href="`${config.domain}/khal/${infoData.newsMap.caseTypeAliases ? infoData.newsMap.caseTypeAliases+'/' : ''}`" class="rc-more">{{ infoData.newsMap.caseTypeAliases ? '查看更多相关案例' : '查看更多案例' }}</a>
          </div>
          <div class="r-contact">
            <div class="rc-title">
              <i class="icon"></i>
              <p class="text">联系方式</p>
            </div>
            <div class="rc-phone">电话：191-0267-1826</div>
            <div class="rc-address">地址：上海市奉贤区金海公路</div>
          </div>
        </div>
      </div>
    </div>
    <Footer :config="config"></Footer>
  </div>
</template>

<script>
var title = ''
var description = ''
var keywords = ''
import u from '@/plugins/public'
export default {
  validate(ctx) {
    return /^\d+\.html/.test(ctx.params.id)
  },
  async asyncData(ctx) {
    // 设置导航选中
    ctx.config.navData[6].on = true

    // 面包屑
    var crumbs = [{
      title: '纺扬科技',
      href: `${ctx.config.domain}/`
    }, {
      title: '新闻资讯',
      href: `${ctx.config.domain}/xwzx/`
    }]

    // 获取类型
    var typeData = []
    let getType = await u.http({
      url: ctx.store.state.queryNewsTypeList,
      params: {
        pageNum: 1,
        pageSize: 6
      }
    })
    if (getType.code == 200) {
      typeData = getType.data.list
      typeData.forEach(item => {
        item.href = `${ctx.config.domain}/xwzx/${item.typeAliases}/`
      })
    }

    // 获取详情
    let id = ctx.params.id ? ctx.params.id.split('.html')[0] : ''
    var infoData = {
      newsMap: {
        newsTypeName: '',
        addTime: '',
        subtitle: '',
        id: '',
        title: '',
        newsType: '',
        content: '',
        views: ''
      },
      previousPageNewsMap: null,
      nextPageNewsMap: null
    }
    let getInfo = await u.http({
      url: ctx.store.state.queryNewsById,
      params: {
        id
      }
    })
    if (getInfo.code == 200) {
      if (getInfo.data.newsMap) {
        infoData.newsMap = getInfo.data.newsMap
        infoData.newsMap.addTimeNow = u.formatTime(infoData.newsMap.addTime, 'Y-m-d')
        crumbs.push({
          title: infoData.newsMap.newsTypeName,
          href: `${ctx.config.domain}/xwzx/${infoData.newsMap.newsTypeAliases}/`
        }, {
          title: infoData.newsMap.title,
          href: ''
        })
      }
      infoData.previousPageNewsMap = getInfo.data.previousPageNewsMap ? getInfo.data.previousPageNewsMap : null
      infoData.nextPageNewsMap = getInfo.data.nextPageNewsMap ? getInfo.data.nextPageNewsMap : null
    }

    // 获取相关案例
    var relevantCaseData = []
    let getRelevantCase = await u.http({
      url: ctx.store.state.queryCaseList,
      params: {
        pageNum: 1,
        pageSize: 10,
        caseTypeAliases: infoData.newsMap.caseTypeAliases
      }
    })
    if (getRelevantCase.code == 200) {
      relevantCaseData = getRelevantCase.data.list
      relevantCaseData.forEach(item => {
        item.href = `${ctx.config.domain}/khalxq/${item.id}.html`
      })
    }

    // TDK
    title = `${infoData.newsMap.title}-纺扬网站建设`
    keywords = '网站制作,网站开发,网站设计,纺扬网站建设'

    return {
      config: ctx.config,
      crumbs,
      typeData,
      infoData,
      relevantCaseData
    }
  },
  head() {
    return {
      title,
      meta: [
        { hid: 'description', name: 'description', content: description },
        { hid: 'keywords', name: 'keywords', content: keywords }
      ]
    }
  }
}
</script>

<style>
  body {
    background-color: #f5f5f5;
  }
</style>